<html>
	<head>
		<meta charset='UTF-8'/>
		<title>Zeek the Geek Designer Help</title>
		<style type='text/css'>
			body {
				background-color: #FFF;
			}
			div.bodyContainer{
				margin-left: auto;
				margin-right: auto;
				max-width: 900px
			}
			div.contentContainer{
				margin-left: 10px;
				margin-right: 10px;
			}
			div.contentContainer#footer{
				text-align: center;
			}
			h1.title{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class='bodyContainer'>
			<h1 class='title'>Zeek the Geek Designer Help</h1>
			<hr/>

			<div class='contentContainer'>
				<h2>Contents</h2>
				<ul>
					<li><a href='#desc'>Description</a></li>
					<li><a href='#editing'>Editing</a></li>
					<li><a href='#export'>Export</a></li>
				</ul>
			</div>
			<hr/>

			<div class='contentContainer'>
				<a name='desc'></a>
				<h2>Description</h2>
				<p>Zeek the Geek Designer is a user friendly tool that lets you design your own level. You can export several levels you made into one Puzzle Pack.</p>
				<p>Programming experience is not essential in creating your puzzles, and you should be able to learn to use the simple controls in just a few minutes. You can build your puzzles with all the features and functionality of Zeek the Geek.</p>
				<p>If you're good at JavaScript programming, you can also add your own code to your level.</p>
			</div>
			<hr/>

			<div class='contentContainer'>
				<a name='editing'></a>
				<h2>Editing</h2>
				<img src='image/help.png'/>
				<p>Left Panel lists all the items available, and Right Panel is the stage.</p>
				<p>Click on the item you'd like to place in the Left Panel, then click on the stage to place the item.</p>
				<p>Right click the stage on one item means removing it from the stage. For Mac users, you should press Control down then click on the item you'd like to erase.</p>
				<p>You can save your work as a level file, in the extension of '.zlv'.</p>
				<p>You can add custom code by creating a '.js' file in the same directory as your level file, and with the same basename as your level file.</p>
			</div>
			<hr/>

			<div class='contentContainer'>
				<a name='export'></a>
				<h2>Export</h2>
				<ul>
					<li>Menu: Tools -> Export</li>
					<li>Click 'Add...' to add .zlv files you'd like to export.</li>
					<li>Click 'Remove' to remove level from exporting, 'Move Up' to move a level up, 'Move Down' to move a level down.</li>
					<li>Finally click 'Export'. If everything goes well, you'll finally see your exported Puzzle Pack in the web browser.</li>
				</ul>
			</div>
			<hr/>
			<div class='contentContainer' id='footer'>
				<p>Author: Frank</p>
				<p>27-FEB-2014</p>
			</div>
		</div>
	</body>
</html>
